<template>
	<image :mode="node.attr.mode" :lazy-load="node.attr.lazyLoad" :class="node.classStr"
		:style="newStyleStr || node.styleStr" :data-src="node.attr.src" :src="node.attr.src" @tap="wxParseImgTap"
		@load="wxParseImgLoad" />
</template>

<script>
	export default {
		name: 'wxParseImg',
		data() {
			return {
				newStyleStr: '',
				preview: true,
			};
		},
		props: {
			node: {
				type: Object,
				default () {
					return {};
				},
			},
		},
		methods: {
			wxParseImgTap(e) {
				if (!this.preview) return;
				const {src} = e.currentTarget.dataset;
				if (!src) return;
				let parent = this.$parent;
				while (!parent.preview || typeof parent.preview !== 'function') { // TODO 遍历获取父节点执行方法
					parent = parent.$parent;
				}
				parent.preview(src, e);
			},
			// 图片视觉宽高计算函数区
			wxParseImgLoad(e) {
				const {src} = e.currentTarget.dataset;
				if (!src) return;
				const {width,height} = e.mp.detail; //获取图片宽高
				const recal = this.wxAutoImageCal(width, height);
				const {imageheight,imageWidth} = recal; //最终图片宽高
				const {padding,mode} = this.node.attr;
				const {styleStr} = this.node;
				const imageHeightStyle = mode === 'widthFix' ? '' : `height: ${imageheight}px;`;
				this.newStyleStr = `${styleStr}; ${imageHeightStyle}; width: ${imageWidth}px; padding: 0 ${+padding}px;`;
			},
			// 计算视觉优先的图片宽高
			wxAutoImageCal(originalWidth, originalHeight) {
				// 获取图片的原始长宽
				const {padding} = this.node.attr;
				const windowWidth = this.node.$screen.width - (2 * padding); //当前屏幕可用宽度
				const results = {};
				if (originalWidth < 60 || originalHeight < 60) {
					const {src} = this.node.attr;
					let parent = this.$parent;
					while (!parent.preview || typeof parent.preview !== 'function') {
						parent = parent.$parent;
					}
					parent.removeImageUrl(src);
					this.preview = false;
				}

				// 判断按照哪种方式进行缩放
				const {dataWidth} = this.node.attr; //当前图片的自定义宽度
				if (dataWidth && dataWidth != 'null' && dataWidth != 'undefined' && dataWidth > 0) {
					results.imageWidth = dataWidth;
					results.imageheight = dataWidth * (originalHeight / originalWidth);
				} else {
					if (originalWidth > windowWidth) { //在图片width大于手机屏幕width时候
						results.imageWidth = windowWidth;
						results.imageheight = windowWidth * (originalHeight / originalWidth);
					} else { //否则展示原来的数据
						results.imageWidth = originalWidth;
						results.imageheight = originalHeight;
					}
				}
				return results;
			}
		}
	};
</script>
